// 封装echarts为Vue插件
import Vue from 'vue'
import echarts from 'echarts'
import '../../node_modules/echarts/map/js/china'
import '../../node_modules/echarts/map/js/world'
import country from './country'

const install = function(Vue){
    Object.defineProperties(Vue.prototype,{
        $mycharts:{
            get(){
                return{
                    // 挂载折线图绘制方法
                    line(id,xData,yData){
                        var myecharts = echarts.init(document.getElementById(id));
                        var option = {
                            grid: {
                                //调整网格间距
                                left: 0, //grid 组件离容器左侧的距离
                                top: 10,
                                bottom:20,
                                containLabel: true, //grid 区域是否包含坐标轴的刻度标签
                            },
                            tooltip:{
                                trigger:"axis",
                            },
                            xAxis:{
                                
                                data:xData
                            },
                            yAxis:{ 

                            },
                            series:[
                                {
                                    name: "人数",
                                    type: "line",
                                    data:yData
                                },
                        ],
                    };
                    myecharts.setOption(option);
                    },
                    // 挂载中国地图绘制方法
                    chinaMap(id,data){
                        var myecharts = echarts.init(document.getElementById(id))
                        var option = {
                            //提示信息
                            tooltip: {
                                enterable:true,
                                formatter:'{b}<br/>新增确诊{c}<hr/>详情',
                                textStyle:{
                                    fontSize: 4,
                                    lineHeight: 20
                                }
                            },
                            visualMap:[
                                //映射地图
                                {
                                    // orient: "horizontal",// 如何放置 visualMap 组件 horizonta(水平的) vertical(竖直的)
                                    type: "piecewise",//piecewise 离散 continuous 连续 
                                    bottom: 0,//visualMap组件位置
                                    itemWidth: 10,
                                    itemGap: 3,//间距
                                    itemWidth: 20,//宽度
                                    textStyle:{  //文字配置信息
                                        fontSize: 9,
                                    },
                                    pieces: [
                                        //配置区间颜色
                                        {
                                            min: 0,
                                            max: 0,
                                            color: "#FFFFFF",
                                        },
                                        {
                                            min: 1,
                                            max: 9,
                                            color: "#FAEBD2",
                                        },
                                        {
                                            min: 10,
                                            max: 99,
                                            color: "#E9A188",
                                        },
                                        {
                                            min: 100,
                                            max: 499,
                                            color: "#D56355",
                                        },
                                        {
                                            min: 500,
                                            max: 999,
                                            color: "#BB3937",
                                        },
                                        {
                                            min: 1000,
                                            max: 10000,
                                            color: "#772526",
                                        },
                                        {
                                            min: 10000,
                                            color: "#480F10",
                                        },
                                    ]

                                }
                            ],
                            series: [{
                                name: "省",
                                type: "map",  //配置图标类型
                                map: "china", //中国地图
                                roam: false,  //是否允许自动缩放
                                zoom: 1.2,    //地图缩放比例
                                aspectScale: 0.75,
                                layoutCenter: ["5%","5%"],
                                label: {      //配置字体
                                    normal:{
                                        show: true,
                                        textStyle: {
                                            fontSize: 8
                                        }
                                    }
                                },
                                itemStyle:{   //配置地图样式
                                    normal:{
                                        areaColor: 'rgba(0,255,236,0)',
                                        borderColor: 'rgba(0,0,0,0.2)',
                                    },
                                    emphasis: {
                                        //选中区域的颜色及阴影效果
                                        areaColor: 'rgba(255,180,0,0.8)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0,0,0,0.5)'
                                    }
                                },
                                data,
                                // data:[
                                //     { name:'内蒙古',value: 200 },
                                //     { name:'北京', value: 800 },
                                //     { name:'青海', value: 50 }
                                // ]
                            }]

                        }
                        myecharts.setOption(option);
                    },
                       //3. 世界地图
                    worldMap(id, data) {
                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                        tooltip: {
                            //悬浮弹框
                            triggerOn: "click", //提示框触发的条件
                            enterable: true, //鼠标是否可进入提示框浮层中，默认为false
                            formatter(item) {
                            //item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d
                            return item.name + "：确诊人数" + item.value;
                            },
                        },
                        visualMap: [
                            {
                            //映射高亮颜色
                            orient: "vertical", //垂直
                            type: "piecewise", //离散
                            bottom: 0,
                            pieces: [
                                // 配置颜色区间
                                {
                                min: 0,
                                max: 0,
                                color: "#FFFFFF",
                                },
                                {
                                min: 1,
                                max: 10000,
                                color: "#FDFDCF",
                                },
                                {
                                min: 10000,
                                max: 100000,
                                color: "#FE9E83",
                                },
                                {
                                min: 100000,
                                max: 500000,
                                color: "#E55A4E",
                                },
                                {
                                min: 500000,
                                // max: 10000,
                                color: "#4F070D",
                                },
                            ],
                            },
                        ],
                        series: [
                            {
                            name: "国",
                            type: "map", //地图  bar  line  map
                            map: "world",
                            nameMap: country, //自定义地区的名称映射
                            roam: false,
                            zoom: 1.2,
                            aspectScale: 0.75,
                            top: 40,
                            layoutCenter: ["5%", "5%"],
                            label: {
                                normal: {
                                show: false,
                                textStyle: {
                                    fontSize: 8,
                                },
                                },
                            },
                            itemStyle: {
                                normal: {
                                areaColor: "rgba(0,255,236,0)",
                                borderColor: "rgba(0,0,0,0.2)",
                                },
                                emphasis: {
                                // 选中的区域颜色及阴影效果等
                                areaColor: "rgba(255,180,0,0.8)",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                },
                            },
                            data,
                            },
                        ],
                        };
                        myChart.setOption(option);
                    },
                    //4. 城市地图
                    cityMap(id, cityname, data) {
                        var myChart = echarts.init(document.getElementById(id));
                        var option = {
                        tooltip: {
                            //悬浮弹框
                            triggerOn: "click", //提示框触发的条件
                            enterable: true,
                            formatter(data) {
                            //[{} ] data={}
                            return data.name;
                            },
                        },
                        visualMap: [
                            {
                            //映射高亮颜色
                            orient: "vertical", //垂直
                            type: "piecewise", //离散
                            bottom: 0,
                            pieces: [
                                // 配置颜色区间
                                {
                                min: 0,
                                max: 0,
                                color: "#FFFFFF",
                                },
                                {
                                min: 1,
                                max: 10,
                                color: "#FDFDCF",
                                },
                                {
                                min: 10,
                                max: 100,
                                color: "#FE9E83",
                                },
                                {
                                min: 100,
                                max: 500,
                                color: "#E55A4E",
                                },
                                {
                                min: 500,
                                max: 10000,
                                color: "#4F070D",
                                },
                            ],
                            },
                        ],
                        series: [
                            {
                            name: "市",
                            type: "map", //地图
                            map: cityname, //中国地图
                            roam: false,
                            zoom: 1.2,
                            aspectScale: 0.75,
                            top: 40,
                            layoutCenter: ["5%", "5%"],
                            label: {
                                normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 8,
                                },
                                },
                            },
                            itemStyle: {
                                normal: {
                                areaColor: "rgba(0,255,236,0)",
                                borderColor: "rgba(0,0,0,0.2)",
                                },
                                emphasis: {
                                // 选中的区域颜色及阴影效果等
                                areaColor: "rgba(255,180,0,0.8)",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                },
                            },
                            data,
                            },
                        ],
                        };
                        myChart.setOption(option);
                    },

                }
            }
        }
    })
}
export default install